<template>
	<view>
		<u-navbar title="生活" :bgColor="showNav ? 'transparent' : '#fff'">
			<view class="search-left" slot="left">
				<image src="/static/img/strategy/dw.png" style="width: 25rpx; height: 25rpx; margin-right: 10rpx" mode=""></image>
				长沙
			</view>
			<view slot="center">
				<u--input
					:border="showNav ? 'none' : 'surround'"
					:customStyle="{ width: '350rpx', height: '55rpx', backgroundColor: '#ffffff', padding: '0 30rpx', marginLeft: '-50rpx' }"
					shape="circle"
					placeholderStyle="width:200rpx"
					color="#999999"
					placeholder="搜索相关攻略"
					prefixIcon="search"
					prefixIconStyle="font-size: 20px;color: #999999"
				></u--input>
			</view>
		</u-navbar>
		<view class="" style="width: 100vw; height: 640rpx"></view>
		<!-- <image style="width: 100vw; height: 640rpx" src="/static/img/navBar/headBgc.png" /> -->
		<view class="strategy-box">
			<view class="carousel">
				<view class="title">暴走长沙博物馆</view>
				<u-swiper indicatorMode="dot" indicatorStyle="bottom:-15rpx" indicatorActiveColor="#149E99" indicator height="320rpx" keyName="src" :list="imgList"></u-swiper>
			</view>
			<view class="zdy-flex zdy-flex-between zdy-flex-wrap">
				<view class="strategy-item" v-for="item in 3" :key="item">
					<u--image :showLoading="true" radius="16rpx 16rpx 0 0" src="/static/img/home/shenghuo.png" width="100%" height="400rpx"></u--image>
					<view class="strategy-location">
						<image src="/static/img/strategy/dw2.png" style="width: 12rpx; height: 16rpx; margin-right: 7rpx" mode=""></image>
						<text>我们的家客栈（大学城店）</text>
					</view>
					<view class="item-bottom">
						<view class="item-title u-line-2">啊啊啊这个酒店真的是我 的宝藏酒店！太喜欢这...</view>
						<view class="zdy-flex">
							<view class="item-tag" v-for="its in 2" :key="its">近景点</view>
						</view>
						<view class="item-user zdy-flex zdy-flex-align-center">
							<u--image :showLoading="true" src="/static/img/home/weizhi.png" width="35rpx" height="35rpx"></u--image>
							<span>不知名的住客</span>
							<image src="/static/img/strategy/dc.png" style="width: 20rpx; height: 20rpx; margin-right: 5rpx; margin-left: auto" mode=""></image>
							<text>152</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="send zdy-flex zdy-flex-center" @click="$tn('/activity/strategy')">
			<u-icon name="plus" color="#85DCD6" size="25" bold></u-icon>
			<span style="margin-left: 15rpx">发布攻略</span>
			<image src="/static/img/strategy/fabu.png" mode=""></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showNav: true, //隐藏导航栏背景
			imgList: [
				{ src: '/static/img/home/shenghuo.png', type: 'image' },
				{ src: '/static/img/home/shenghuo.png', type: 'image' },
				{ src: '/static/img/home/shenghuo.png', type: 'image' },
				{ src: '/static/img/home/shenghuo.png', type: 'image' }
			]
		};
	},
	onPageScroll(e) {
		this.showNav = e.scrollTop < 5;
	},
	methods: {}
};
</script>
<style>
page {
	background-color: #e6f8f7;
}
</style>
<style scoped lang="scss">
.search-left {
	line-height: 25rpx;
	font-weight: bold;
	font-size: 34rpx;
}
.strategy-box {
	margin: -440rpx 30rpx 30rpx;
	padding-bottom: 50rpx;
	.carousel {
		margin-bottom: 30rpx;
		padding: 25rpx 0;
		background: #d2f3f0;
		border-radius: 16rpx;
		.title {
			margin: 0 25rpx 25rpx;
			font-family: Alimama ShuHeiTi;
			font-weight: bold;
			font-size: 32rpx;
		}
	}
	.strategy-item {
		position: relative;
		margin-bottom: 20rpx;
		width: 48%;
		.strategy-location {
			position: absolute;
			font-weight: 500;
			font-size: 20rpx;
			color: #ffffff;
			top: 360rpx;
			left: 30rpx;
		}
		.item-bottom {
			border-radius: 0 0 16rpx 16rpx;
			background-color: #ffffff;
			padding: 30rpx;
		}
		.item-title {
			margin-bottom: 15rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #333333;
		}
		.item-tag {
			margin-bottom: 15rpx;
			margin-right: 8rpx;
			background: #dff6f4;
			border-radius: 4rpx;
			padding: 5rpx 10rpx;
			font-weight: 500;
			font-size: 20rpx;
			color: #149e99;
		}
		.item-user {
			font-weight: 500;
			span {
				font-size: 20rpx;
				color: #666666;
				margin-left: 8rpx;
			}
			text {
				font-size: 24rpx;
				color: #149e99;
			}
		}
	}
}
.send {
	padding: 25rpx 45rpx;
	position: fixed;
	background: #ffffff;
	border-radius: 80rpx;
	left: 50%;
	transform: translateX(-50%);
	bottom: 40rpx;
	font-weight: bold;
	font-size: 32rpx;
	color: #333333;
	image {
		position: absolute;
		top: 10rpx;
		right: 25rpx;
		width: 18rpx;
		height: 26rpx;
	}
}
</style>
